<!-- 这是接诊平台页面 -->

<template>
  <div id="workbench">
    <!-- 表单 -->
    <el-form style="display: flex; align-items: center;">
      <!-- 日期选择器 -->
      <el-form-item class="block" style="margin-right: 20px;">
        <span class="demonstration" style="margin-right: 10px;">选择挂号时间</span>
        <el-date-picker
            @change="search"
            v-model="createTime"
            type="date"
            placeholder="请选择日期"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            :size="size"
        />
<!--        <el-date-picker
            v-model="createTime"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            default
            clearable
            style="width: 250px;"
        />-->
      </el-form-item>
      <!-- 下拉选择器 -->
      <el-form-item>
        <span class="demonstration" style="margin-right: 10px;">选择接诊状态</span>
        <el-select
            v-model="status"
            clearable
            placeholder="请选择接诊状态"
            style="width: 150px;margin-right: 20px;"
            @change="search"
        >
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- 姓名输入框 -->
      <el-form-item>
        <el-input placeholder="请输入患者姓名" v-model="name">
          <template #append>
              <el-button style="color: #FFFFFF;background-color: #3b82f6;" :icon="Search" @click="search" />
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <!-- 患者数据列表 -->
    <el-row :gutter="20">
      <el-col v-for="patient in patientData" :key="patient.id" :span="6" style="margin-bottom: 20px;">
        <el-card class="box-card" style="position: relative;" shadow="never">
          <div class="userInfo" style="display: flex; flex-direction: row;  align-items: center;">
            <img src="../../assets/images/LoginLogo.png" alt="暂无图片" style="width: 70px; height: 70px; border-radius: 50%;">
            <div class="info" style="font-size: 12px; color: #6B7280;margin-left: 40px;">
              <p>
                <span style="font-size: 16px; color: #333333; font-weight: bold; width: 100px; margin-right: 30px;">{{ patient.name }}</span>
                <span style="margin-right: 30px;">{{ patient.gender == 1 ? '男' : '女' }}</span>
                <span>{{ patient.age }}岁</span>
              </p>
              <p style=" width: 100%; margin-top: 5px;font-size: 12px" >
                <span style="width: 100%;">创建时间：{{ patient.createTime }}</span>
              </p>
              <p style="margin-top: 5px">
                <span>手机号码：{{ patient.phoneNum }}</span>
              </p>
            </div>
            <!-- 根据值显示不同的文字和颜色 10显示待接诊 20显示接诊中 30显示已接诊 40显示退号-->
            <div class="statusBtn">
              <el-tag :type="patient.status==10?'warning':patient.status==20?'success':patient.status==30?'success':'info' ">
                {{patient.status==10?'待接诊':patient.status==20?'接诊中':patient.status==30?'已接诊':'已退号'}}
              </el-tag>
            </div>
          </div>
          <div class="buttonBox" style="margin-top: 30px; height: 50px; display: flex; justify-content: center; align-items: center;">
            <!--当接诊状态为10时且当前登录用户id与所选患者对应doctorId相等时 接诊按钮才能能点击-->
            <el-button style="width: 50%; height: 50px" @click="handleAccept(patient.id)" v-if="patient.status==10 && patient.doctorId==doctorId" >接诊</el-button>
            <el-button style="width: 50%; height: 50px" @click="handleViewPatientInfo(patient)">查看患者信息</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 分页器 -->
    <el-pagination background size="small" layout="prev, pager, next"  :total="1000" style="float: right;margin: 20px 0" />


    <!--点击查看按钮 弹框-->
    <el-dialog title="查看" class="dialogBox" v-model="dialogVisible" width="80%" draggable destroy-on-close top="15vh">
      <el-card shadow="never" style="padding: 0;">
        <h2 style="font-size: 16px;margin-bottom: 10px">患者信息</h2>
<!--        显示患者姓名、性别、年龄、手机号、身份证号、地址、血型、婚姻状况、医保号-->
        <el-table label="患者信息" style="width: 100%;padding: 0;" :data="patientData1">
          <el-table-column prop="name" label="姓名" width="100" />
          <el-table-column prop="gender" label="性别" width="100" />
          <el-table-column prop="age" label="年龄" width="100" />
          <el-table-column prop="phoneNum" label="手机号码" width="200" />
          <el-table-column prop="address" label="地址" width="200" />
          <el-table-column prop="bloodType" label="血型" width="100" />
          <el-table-column prop="maritalStatus" label="婚姻状况" width="100" />
          <el-table-column prop="personId" label="身份证号" width="200" />
          <el-table-column prop="insuranceNum" label="医保号" width="200" />
        </el-table>
      </el-card>
    </el-dialog>
  </div>
</template>

<script setup>

import {onMounted, ref} from 'vue'
/*引入要使用的图标*/
import {Search} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";
import { useRouter } from 'vue-router';

/*取当前登录用户id（doctorId）*/
const doctorId = getUserInfo().id

const router = useRouter();
/*定义日期选择器的值*/
const createTime = ref('')
/*定义下拉选择器的值*/
const status = ref('')
/*定义姓名输入框的值*/
const name = ref('')
/*定义下拉选择器的选项*/
const options = [
    {value: '10', label: '待接诊'},
    {value: '20', label: '接诊中'},
    {value: '30', label: '已接诊'},
    {value: '40', label: '已退号'},
]


/*定义搜索框数据*/
const searchData = ref({
  createTime: '',
  status: '',
  name: '',
})


/*定义搜索方法*/
const search = () => {
  console.log("执行搜索方法");
  console.log(createTime.value);
  let searchData = {
    createTime: createTime.value,
    status: status.value,
    name: name.value,
  }
  console.log("表单数据",searchData)
  let data = qs.stringify(searchData);
  axios.get(BASE_URL+"/v1/attendance/select?"+data).then((res) => {
    console.log("搜索患者接口响应数据",res.data.data);
    if(res.data.code == 2001){
      ElMessage({
        message: "搜索成功",
        type: "success"
      });
      patientData.value = res.data.data;
    }else {
      ElMessage({
        message: "搜索失败，请稍后再试",
        type: "error"
      });
    }
  });
}
/*定义列表数据*/
const patientData = ref([]);
/*根据状态返回按钮背景颜色*/
const getStatusColor = (status) => {
  switch (status) {
    case '待接诊':
      return '#FF6262';
    case '接诊中':
      return '#28D094';
    case '已完成':
      return '#cccccc';
    default:
      return '#cccccc'; // 默认灰色
  }
};
/*处理接诊按钮点击事件*/
const handleAccept = (id) => {
  // 实现接诊逻辑，例如更新患者状态等
  //只能接诊状态码为10即待接诊状态的患者，如果点击接诊的患者的状态不是10，则提示“请选择状态为待接诊的患者”
  // if (status.value !== '10') {
  //   ElMessage.error('请选择待接诊患者');
  //   return;
  // }
  axios.post(BASE_URL+"/v1/attendance/updateStatusById/"+id).then((res) => {
    if(res.data.code===2001){
      ElMessage.success('接诊成功');
      search();
      // 路由跳转到 PatientManagement 页面
      router.push("/intakePatient");
    }else{
      ElMessage.error(res.data.msg);
    }
  });

};

//定义控制弹窗是否显示的状态
const dialogVisible = ref(false);
//定义查看患者信息弹窗数据
const patientData1 = ref([]);

/*处理查看患者信息按钮点击事件*/
const handleViewPatientInfo = (patient) => {
  // 实现查看患者信息的逻辑，例如打开一个模态框显示详细信息
  ElMessage({
    message: `查看患者信息：${patient.name}`,
    type: 'info'
  });
  console.log("查看患者信息",patient);
  patientData1.value=[patient];
  console.log("查看患者信息弹窗数据",patientData1.value);

  //点击查看患者信息按钮，弹出弹窗显示患者信息
  dialogVisible.value = true;

};
/*页面加载完毕，立即执行*/
onMounted(()=>{
  //将createTime初始化为当日日期
  // createTime.value = new Date().toISOString().slice(0, 10);
  console.log('♥工作台页面加载完毕');
  search();

})
</script>

<style scoped>
#workbench{
  /*溢出滚动条样式美化为消失的状态*/
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar{
    display: none;
  }
}
/* 自定义日期选择器的背景颜色 */
.el-picker-panel__body-wrapper {
  background-color: #b4d3ff; /* 你可以根据需要更改颜色 */
}

/* 自定义日期选择器的输入框样式 */
.el-input__inner {
  border: 1px solid #dcdcdc; /* 边框颜色 */
  border-radius: 4px; /* 圆角 */
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); /* 内阴影 */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* 过渡效果 */
}

/* 自定义日期选择器的按钮样式 */
.el-picker-panel__footer button {
  background-color: #409eff; /* 按钮背景颜色 */
  color: #fff; /* 按钮文字颜色 */
  border: none; /* 去掉边框 */
  border-radius: 4px; /* 圆角 */
  padding: 10px 20px; /* 内边距 */
  font-size: 14px; /* 字体大小 */
  cursor: pointer; /* 鼠标指针样式 */
  transition: background-color 0.3s ease; /* 过渡效果 */
}

.el-picker-panel__footer button:hover {
  background-color: #66b1ff; /* 鼠标悬停时的背景颜色 */
}

.el-picker-panel__footer button:active {
  background-color: #26a69a; /* 鼠标按下时的背景颜色 */
}
/*状态按钮*/
.statusBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 25px;
  border-radius: 10px;
  font-size: 12px;
}
</style>